<template>
<div id="ym" :class="['g-v-h', {injected}, {'not-injected': !injected}]">
  <a-locale-provider :locale="locale">
    <router-view class="g-v-h"></router-view>
  </a-locale-provider>
</div>
</template>

<script>
import type from '@/store/type'
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'

export default {
  name: 'ym',
  props: {},
  data () {
    return {
      loading: false,
      injected: false,
      locale: zhCN
    }
  },
  computed: {
  },
  created () {
  },
  mounted () {
    window.toLogin = this.toLogin
    document.title = this.lang.system.name

    if (this.token) {
      this.$store.dispatch(type.MemberProfileChange)
    }
    let locale = window.localStorage.getItem('locale')
    if (locale && this.$i18n.messages[locale]) {
      this.$i18n.locale = locale
    }

    const idx = location.search.indexOf('?')
    const query = {}
    if (idx !== -1) {
      location.search.substr(idx + 1).split('&').forEach(v => {
        const item = v.split('=')
        query[item[0]] = item[1]
      })
    }
    this.injected = query.injected === 'yes'

    this.$root.$on('view.cattle.profile', (v) => {
      if (this.injected) {
        window.parent.postMessage({event: 'view.cattle.profile', params: v}, '*')
      } else {
        this.$root.$emit('view.cattle.profiled', v)
      }
    })
    window.addEventListener('message', (ev) => {
      if (ev.data.event === 'view.cattle.profile') {
        this.$root.$emit('view.cattle.profile', ev.data.params)
      }
    })

    this.doExposeApi()
  },
  methods: {
    toLogin () {
      this.$store.commit(type.TokenChange)
      this.$router.push({name: 'login'})
    },
    doExposeApi () {
      window.ym = {}
      window.ym.loading = (v) => {
        this.loading = v === true
      }
      window.ym.onRouterError = (v) => {
        console.log(v)
      }
    }
  },
  watch: {
    _locale_ (next) {
      setTimeout(() => {
        document.title = this.lang.system.name
        document.body.setAttribute('data-locale', next || 'cn')
      }, 500)
    }
  },
  components: {
  }
}
</script>

<style>
#ym {
}
</style>
